<template>
  <section>
    <div
      class="row-start-center h-[65px] text-[14px] border-bottom text-[#444] px-[15px]"
      @click="expand = !expand"
    >
      <div
        class="w-[25%] mr-[6px] break-all box-border px-[4px]"
        :class="`text-${typeMap[item.Type].type}`"
      >
        {{ typeMap[item.Type].text }}
      </div>
      <div class="w-[30%] mr-[6px] break-all box-border px-[4px]">
        {{ item.LotteryName || "--" }}
      </div>
      <div class="w-[20%] text-center">
        <div>{{ formatDate(item.CreatedAt, "MM月DD日") }}</div>
        <div>{{ formatDate(item.CreatedAt, "HH:mm") }}</div>
      </div>
      <div
        class="w-[25%] text-center box-border px-[4px]"
        :class="{
          'text-red': item.Coin < 0,
          'text-blue': item.Coin > 0
        }"
      >
        {{ formatCurrency(item.Coin) }}
      </div>
    </div>
    <div class="bg-[#f8f8f8] px-[15px]" v-if="expand">
      <ul class="text-[#888]">
        <li class="flex justify-between items-center py-[10px]">
          <div>用户名</div>
          <div>{{ item.Name }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>昵称</div>
          <div>{{ item.Nickname || "--" }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>变动前积分</div>
          <div>{{ formatCurrency(item.BalanceBefore) }}</div>
        </li>
        <li class="flex justify-between items-center py-[10px]">
          <div>变动后积分</div>
          <div>{{ formatCurrency(item.BalanceAfter) }}</div>
        </li>
      </ul>
    </div>
  </section>
</template>
<script setup lang="ts">
import { formatCurrency, formatDate } from "@/utils/common";

withDefaults(
  defineProps<{
    item: ReportCoinRecordMo;
  }>(),
  {}
);

const typeMap = reactive<Record<string, TextType>>({
  1: { text: "上分申请", type: "primary" },
  2: { text: "下分申请", type: "primary" },
  3: { text: "上分驳回", type: "danger" },
  4: { text: "上分通过", type: "success" },
  5: { text: "下分驳回", type: "danger" },
  6: { text: "下分通过", type: "success" },
  7: { text: "投注", type: "primary" },
  8: { text: "投注盈利", type: "success" },
  9: { text: "红包", type: "danger" },
  10: { text: "佣金", type: "info" },
  11: { text: "反水", type: "info" },
  12: { text: "游客体验金", type: "info" },
  13: { text: "订单取消", type: "danger" },
  14: { text: "活动", type: "warning" }
});

const expand = ref(false);
</script>
